<!--
 * @Author: your name
 * @Date: 2021-09-16 09:11:27
 * @LastEditTime: 2021-09-16 09:28:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\6-jQuery\day05\1-渐变图形.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <script>
        //文档加载完毕执行代码
        window.onload = function() {
            //1.获取画布
            var canvas = document.querySelector("canvas");
            //2.获取画笔 上下文对象---->context
            var context = canvas.getContext("2d");
            //3.声明一个径向渐变对象  用上下文对象context调用
            //createRadialGradient 第一二个参数代表小圆圆心坐标 第三个参数是小圆的半径
            //第四五个参数大圆圆心坐标 第六个参数是大圆的半径
            var g = context.createRadialGradient(200, 200, 50, 200, 200, 200);
            //4.给渐变对象添加一个渐变色
            g.addColorStop(0, "red");
            g.addColorStop(0.25, "pink");
            g.addColorStop(0.5, "yellow");
            g.addColorStop(0.75, "blue");
            g.addColorStop(1, "cyan");
            //5.将渐变对象给到填充样式
            context.fillStyle = g;
            //6.绘制一个线性渐变矩形
            context.fillRect(0, 0, 400, 400);
        }
    </script>
</head>

<body>
    <canvas width="400px" height="400px" style="background-color: #ccc;"></canvas>
</body>

</html>